<template>
	<div class="flex items-center justify-center mb-[15px] text-sm text-primary cursor-pointer">
		<div v-if="imageAddress" class="flex-cross-center" @click="viewCoursePicture">
			{{ courseTitle }}
		</div>
		<span class="ml-[10px] text-t-3">{{ tellMsg }}</span>
	</div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { t } from '@/utils'
import { tutorial } from '@/api/wallet'
import { useAppStore } from '@/store'

const props = defineProps({
	tellMsg: {
		type: String,
		default: ''
	},
	walletType: {
		type: Number,
		default: 0 // 0 存款 1 提款
	},
	currencyType: {
		type: String,
		default: 'flat' // flat法币，crypto虚拟币
	}
})

const courseTitle = computed(() =>
	props.walletType === 0 ? t('wallet.rechargeCourse') : t('wallet.withdrawCourse')
)
const store = useAppStore()
const locale = computed(() => store.lang)

const imageAddress = ref('')
const emit = defineEmits(['loaded'])
const getTutorial = async () => {
	try {
		const params = {
			currencyType: props.currencyType,
			type: props.walletType,
			locale: locale.value
		}
		const { data } = await tutorial(params)
		if (data.img) {
			imageAddress.value = import.meta.env.VITE_IMAGE_URL + data.img
		} else {
			imageAddress.value = ''
		}
		emit('loaded', data.exchanges)
	} catch (e) {
		console.log(e)
	}
}

watch(
	() => [props.walletType, props.currencyType],
	() => {
		getTutorial()
	}
)

const viewCoursePicture = () => {
	window.open(imageAddress.value + '?external=true', '_blank')
}

onMounted(() => {
	getTutorial()
})
</script>
<style lang="scss" scoped></style>
